<template>
    <div class="gridList">
        <div class="gridList_inner">
            <van-grid clickable :column-num="4" :border="false" >
                <van-grid-item :to="item.to" v-for="(item, index) in gridListData" :key="index" >
                    <template #icon>
                        <van-image width="47" height="47" fit="contain" :src="item.src" />
                    </template>
                    <template #text>
                        <span class="gridList_title">{{item.title}}</span>
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script>
export default {
    name: 'gridList',
    data(){
        return {
            gridListData: [
                {to: '/Personal', src: require('assets/images/personal.png'), title: '个人文档'},
                {to: '/Department', src: require('assets/images/department.png'), title: '部门文档'},
                {to: '/Group', src: require('assets/images/group.png'), title: '群组文档'},
                {to: '/Public', src: require('assets/images/public.png'), title: '公共文档'},
                {to: '/Examine', src: require('assets/images/examine.png'), title: '我的审核'},
                {to: '/Recycle', src: require('assets/images/recycle.png'), title: '回收站'}
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.gridList{
    background-color: #f8f8f8;
    margin: 0 -15px;
    padding: 0 0 8px;
    .gridList_inner{
        // padding: 0 15px;
        background-color: #fff;
        .gridList_title{
            font-size: 12px;
            color: #2a2b2d;
            margin-top: 5px;
        }
    }
}

.gridList /deep/ .van-grid{
    background-color: #fff;
    padding: 10px 0;
}

.gridList /deep/ .van-grid-item__content--center{
    padding: 10px 8px;
}
</style>